import { useEffect, useMemo } from 'react';
import timg from '../assets/images/timg.jpg'
import './HomeHead.scss'
import { connect } from 'react-redux';
import action from '../store/action'
import { useNavigate } from 'react-router-dom';
function HomeHead(props) {
    /* 计算时间中的日和月 */
    let { today, info, queryUserInfoAsync } = props;
    let navigate = useNavigate()
    //第一次渲染完：如果info中没有信息，我们尝试派发一次，获取到登录者信息
    useEffect(() => {
        if (!info) {
            queryUserInfoAsync();
        }
    }, [])
    let time = useMemo(() => {
        let [, month, day] = today.match(/^\d{4}(\d{2})(\d{2})$/),
            area = [, '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二']
        return {
            month: area[+month],
            day
        }
    }, [today])
    return <header className="home-head-box">
        <div className='info'>
            <div className="time">
                <span>{time.day}</span>
                <span>{time.month}月</span>
            </div>
            <h2 className="title">知乎日报</h2>
        </div>
        <div className='picture' onClick={()=>{
            navigate('/personal')
        }}>
            <img src={info ? info.pic : timg} alt="" />
        </div>
    </header>
}
export default connect(state => state.base, action.base)(HomeHead) 